<template>
  <yk-space dir="vertical" class="side-bar" size="m">
    <router-link
      class="side-bar-nav"
      v-for="item in navLinks"
      :key="item.path"
      :to="item.path"
    >
      <yk-space align="center" size="m">
        <component :is="item.icon" />
        <yk-text>{{ item.name }}</yk-text>
      </yk-space>
    </router-link>
  </yk-space>
</template>

<script setup lang="ts">
import { navLinks } from "../../utils/side";
</script>

<style scoped lang="less">
.side-bar {
  padding: @space-l;
  position: fixed;
  top: 72px;
  left: 8px;
  &-nav {
    width: 160px;
    height: 40px;
    border-radius: @radius-m;
    padding: 0 @space-l;
    display: flex;
    align-items: center;
    text-decoration: none;

    .yk-icon {
      color: @font-color-ss;
      width: 16px;
      height: 16px;
    }
    &:hover {
      background: @bg-color-l;
      .yk-text{
        font-weight: 600;
      }
    }
  }
  .router-link-active{
    background: linear-gradient(180deg, #2b5aede0 0%, #2B5AED 100%);
    .yk-icon {
      color: @white;
    }
    .yk-text{
        color: @white;
        font-weight: 600;
      }
  }
}
</style>
